<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="p-3">
		<view class="bg-white p-1">
		<view class="flex content-center">
			<image class="headimg" :src="shop.image" mode="aspectFill"></image>
			<view class="title" style="line-height: 62rpx;">
				{{shop.name}}
			</view>
		</view>
		<view class="yuer">
			<image class="bgcimg" src="/static/images/merchant/indexbg.svg" mode=""></image>
			<view class="one">
				我的余额(元)
			</view>
			<view class="two">
				{{shop.balance}}
			</view>
			<view class="three flex  content-center" @click="gopage('/pages/components/pages/merchant/wallet')">
				<span>余额明细</span> <uv-icon name="arrow-right" size="26rpx" color="#ffffff"></uv-icon>
			</view>
			<view class="four"
				@click="gopage('/pages/components/pages/merchant/cash')">
				立即提现
			</view>
			<view class="yuer_bom flex justify-between ">
				<view class="flex content-center" v-if="isShow">
					<image src="/static/images/merchant/on.svg" mode=""></image>
					<text>营业中</text>
				</view>
				<view class="flex content-center" v-else>
					<image src="/static/images/merchant/off.svg" mode=""></image>
					<text>停业中</text>
				</view>
				<uv-switch v-model="isShow" size="20" @change="change"></uv-switch>
			</view>
		</view>
		</view>
		<!-- 分类 -->
		<view class="card flex flex-wrap content-between">
			<view class="card_item" v-for="(item,i) in orderCountList" :key="i" @click="goOrder(i)">
				<view class="type" >
					<uv-badge type="error" max="99" :value="item.type"></uv-badge>
				</view>
				<image :src="item.url" mode=""></image>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 今日数据 -->
		<view class="day_card">
			<view class="title flex content-center justify-between">
				<view class="flex content-center">
					<view class="one">
						今日数据
					</view>
				</view>
				<view class="flex content-center">
					<view class="two" style="line-height: 50rpx;margin-left: 20rpx;width: 370rpx;">
						{{timer}} 实时更新
					</view>
					<view class="dayimg">
						<image style="margin-top: 10rpx;" src="/static/images/merchant/refresh.svg" mode="" @click="getloding"></image>
					</view>
				</view>
			</view>
			<!-- 数据 -->
			<view>
				<uv-grid :border="true" col="2">
					<uv-grid-item v-for="(item,Index) in gridlist" :key="Index">
						<view class="grid">
							<view class="grid_one">
								{{item.title}}
							</view>
							<view class="grid_two">
								{{item.type}}
							</view>
						</view>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
		<uv-tabbar :value="value" @change="index=>value = index" activeColor="#09b4f1">
			<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item text="订单" icon="order" @click="gopage('/pages/components/pages/merchant/order')"></uv-tabbar-item>
			<uv-tabbar-item text="桌台" icon="bell" @click="gopage('/pages/components/pages/merchant/bell')"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="gopage('/pages/components/pages/merchant/my')"></uv-tabbar-item>
			<uv-tabbar-item text="返回" icon="arrow-leftward" @click="gopage2('/pages/index/index')"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onShow,onUnload,onLoad,onHide} from '@dcloudio/uni-app'
import {
	getData,
	changeStatus
} from '@/api/merchant'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { formatDateTime } from '@/utils/util'
const main = useMainStore()
const title = ref('商户中心')
const isShow = ref(true)
const gridlist = ref([])
const orderCountList = ref([])
const shop = ref({})
const value = ref(0)
let timer = ref('') 
let inter = null

onLoad(() => {
	getHomeData()
	inter = setInterval(() => {
		getHomeData()
	}, 30000)
})

onUnload(() => {
	clearInterval(inter)
})

onHide(() => {
  clearInterval(inter)  
})


const getTime = () => {
	let date = new Date() 
	let hour = date.getHours()
	
	let endHour= new Date(shop.value.endTime).getHours()
	let startHour = new Date(shop.value.startTime).getHours()

	if(shop.value.status == 1){
		if (hour >= startHour && hour <= endHour ) {
			isShow.value = true
		}else{
			isShow.value = false
		}
	}else{
		isShow.value = false
	}
	
}

const goOrder = (i) => {
	uni.navigateTo({
		url: '/pages/components/pages/merchant/order?index=' + (i + 1)
	})
}
const  change = async() => {
	let status = 0
	!isShow.value
	if(isShow.value){
		status = 1
	}
	let res = await changeStatus({
		shopId: shop.value.id,
		status: status
	})
	
}

const gopage = (url) => {
	uni.navigateTo({
		url
	})
}

const gopage2 = (url) =>{
	uni.switchTab({
		url
	}) 

}

const  getloding = async() => {
	uni.showLoading({
		title: '数据加载中...'
	})
	getHomeData()
	uni.hideLoading()
}

const getHomeData = async() => {
	let res = await getData()
	shop.value = res.appStoreShopVO
	main.SET_MERCHART_SHOP(res.appStoreShopVO)
	timer.value = formatDateTime(new Date())
	if (shop.value.status == 1) {
		isShow.value = true
	} else {
		isShow.value = false
	}
	getTime()
	orderCountList.value = [{
		url: '/static/images/merchant/order01.svg',
		name: '待出单',
	    type: res.appOrderCountVO.num01
	}, {
		url: '/static/images/merchant/order02.svg',
		name: '待收货',
	    type: res.appOrderCountVO.num02
	}, {
		url: '/static/images/merchant/order03.svg',
		name: '已完成',
		type: res.appOrderCountVO.num03
	}, {
		url: '/static/images/merchant/order04.svg',
		name: '待退款',
		type: res.appOrderCountVO.num04
	}, {
		url: '/static/images/merchant/order05.svg',
		name: '待支付',
	    type: res.appOrderCountVO.num05
	}, {
		url: '/static/images/merchant/order06.svg',
		name: '已退款',
		type: res.appOrderCountVO.num06
	}, {
		url: '/static/images/merchant/order07.svg',
		name: '预约中',
		type: res.appOrderCountVO.num07
	}]
	gridlist.value = [{
		title: '今日营业额(元)',
		type: res.appTodayDataVO.num01
	}, {
		title: '今日订单(单)',
		type: res.appTodayDataVO.num02
	}, {
		title: '今日访客(人)',
		type: res.appTodayDataVO.num03
	}, {
		title: '今日退单(单)',
		type: res.appTodayDataVO.num04
	}]

}

	
</script>

<style lang="scss">
	.headimg {
		width: 62rpx;
		height: 62rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
	}

	.yuer {
		position: relative;
		width: 700rpx;
		height: 340rpx;
		background-color: #fff;
		margin: 28rpx 0 0rpx;

		.bgcimg {
			width: 680rpx;
			height: 250rpx;
			border-radius: 10rpx;

		}

		.yuer_bom {
			height: 100rpx;
			padding: 20rpx 26rpx 0;
			box-sizing: border-box;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}

			font-size: 24rpx;
			color: #000000;
		}

		.one {
			font-size: 30rpx;
			color: #FFFFFF;
			position: absolute;
			top: 56rpx;
			left: 50rpx;
		}

		.two {
			font-size: 56rpx;
			font-weight: 600;
			color: #FFFFFF;
			position: absolute;
			top: 120rpx;
			left: 50rpx;
		}

		.three {
			font-size: 22rpx;
			color: #FFFFFF;
			position: absolute;
			top: 66rpx;
			right: 88rpx;
		}

		.four {
			width: 188rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 26rpx;
			font-size: 22rpx;
			color: #00ABFF;
			line-height: 52rpx;
			text-align: center;
			position: absolute;
			top: 132rpx;
			right: 64rpx;
		}
	}

	.card {
		width: 700rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 0rpx;
		box-sizing: border-box;
		margin: 40rpx 0;

		.card_item {
			position: relative;
			width: 140rpx;
			text-align: center;
			font-size: 24rpx;
			color: #777777;
			margin: 16rpx 0;

			image {
				width: 74rpx;
				height: 74rpx;
			}

			.type {
				font-size: 14rpx;
				line-height: 26rpx;
				text-align: center;
				position: absolute;
				right: 36rpx;
				top: 4rpx;
				z-index: 99;
			}
		}
	}

	.day_card {
		background-color: #fff;
		margin-bottom: 40rpx;

		.dayimg {
			text-align: right;
			width: 40rpx;
		}

		.title {
			padding: 18rpx 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EBEBEB;

			.one {
				font-size: 34rpx;
				color: #000000;
			}

			.two {
				font-size: 24rpx;
				color: #777777;
				width: 350rpx;
				height: 34rpx;
			}

			image {
				width: 27rpx;
				height: 34rpx;
			}
		}
	}

	.grid {
		padding: 20rpx 80rpx;
		box-sizing: border-box;
		text-align: center;

		.grid_one {
			font-size: 26rpx;
			color: #777777;
			margin-bottom: 10rpx;
		}

		.grid_two {
			font-size: 34rpx;
			color: #000000;
		}
	}
</style>